<style>
    .remove {
        cursor: pointer;
    }

    #error {
        padding: 0 25px 0 6px;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #ff5722;
        font-size: 14px;
        color: #ffffff;
        overflow: hidden;
        background-color: #ff5722;
        border-radius: 2px 2px 0 0;
    }

    #errors {
        padding: 0 25px 0 6px;
        border-bottom: 1px solid #ff5722;
        font-size: 14px;
        color: #ffffff;
        overflow: hidden;
        background-color: #ff5722;
        border-radius: 2px 2px 0 0;
    }

    #success {
        padding: 0 25px 0 6px;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #42c02e;
        font-size: 14px;
        color: #ffffff;
        overflow: hidden;
        background-color: #42c02e;
        border-radius: 2px 2px 0 0;
    }
</style>
@if (session('error'))
    <div id="error">{{ session('error') }}
        <a class="remove" style="float: right;" href="javascript:void(0);">&times;</a>
    </div>
    <br>
@endif
@if (count($errors) > 0)
    <div id="errors">
        <a class="remove" style="float: right;margin: 15px 0 0 0"
           href="javascript:void(0);">&times;</a>
        <ul>
            @foreach ($errors->all() as $error)
                <li style="height: 42px;line-height:42px;">{{ $error  }}</li>
            @endforeach
        </ul>
    </div>
    <br>
@endif
@if (session('success'))
    <div id="success">{{ session('success') }}
        <a class="remove" style="float: right;" href="javascript:void(0);">&times;</a>
    </div>
    <br>
@endif
<script src="{{asset('js/jquery.min.js')}}" type="text/javascript" charset="utf-8"></script>
<script>
    $(document).on('click', '.remove', function () {
        $(this).parent().remove()
    })
</script>
